<template>
   <div>
      <label>
         <input type="radio" name="status" v-model="type" value="0" />
         全部({{ todoList.length }})
      </label>
      <label>
         <input type="radio" name="status" v-model="type" value="1" />
         未完成({{ unFinishedTodoList.length }})
      </label>
      <label>
         <input type="radio" name="status" v-model="type" value="2" />
         已完成({{ finishedTodoList.length }})
      </label>
   </div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { useTodoStore } from '../stores/TodoListStore'
const type = ref('0');
const { todoList, setFilterType } = useTodoStore();
const unFinishedTodoList = computed(() => {
   // 挑选出 未完成
   return todoList.filter((item) => item.isEnd === false)
})
const finishedTodoList = computed(() => {
   // 挑选出 已完成
   return todoList.filter((item) => item.isEnd === true)
})
watch(type, (newType) => {
   setFilterType(newType);
})
</script>
<style scoped>

</style>